<template>
  <div class="sidebar-item">
    <!-- sidebar数据 -->
    <div class="center">
      <div
        v-for="(item, index) in categoryList"
        :key="item.index"
        class="subitem"
        :class="{ 'active': isActive === index }"
        @click="clickItem(item.id, index)"
      >
        <span>{{ item.name }}</span>
        <div class="btn-wrap">
          <el-button icon="el-icon-edit-outline" @click="$emit('changeStatus', item)" />

          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="是否要删除该分类？"
            @confirm="deleteCategory(categoryList[0].id, item.id)"
          >
            <el-button slot="reference" icon="el-icon-close" />
          </el-popconfirm>
        </div>
      </div>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      background
      class="pagination"
      :total="totalCount"
      layout="prev, next"
      @prev-click="$emit('changePage', -1)"
      @next-click="$emit('changePage', 1)"
    />
  </div>
</template>

<script>
import { deleteCategory } from '@/api/image'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'SidebarItem',
  props: {
  },
  data() {
    return {
      imageParams: {
        id: 0,
        page: 1,
        limit: 8
      },
      isActive: 0
    }
  },

  computed: {
    ...mapGetters(['categoryList', 'totalCount'])
  },
  watch: {
    categoryList: {
      async handler(val) {
        this.imageParams.id = val[0].id
        await this['image/getImageList'](this.imageParams)
      },
      deep: true
    }
  },
  methods: {
    // 获取方法
    ...mapActions(['image/getImageList']),
    async clickItem(id, index) {
      this.isActive = index
      this.imageParams.id = id
      await this['image/getImageList'](this.imageParams)
    },
    // 删除分类方法
    async deleteCategory(topId, id) {
      try {
        await deleteCategory(id)
        this.isActive = 0
        this.$emit('deleteCategory')
        this.$message.success('删除分类成功')
      } catch (error) {
        console.log(error)
        this.$message.error('删除分类失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-right: 1px solid #f4f4f4;

  .active {
    background-color: rgba(239, 246, 255, 1);
  }

  .center {
    height: 100%;

    .subitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f4f4f4;
      height: 45px;

      &:hover {
        background-color: rgba(239, 246, 255, 1);
        cursor: pointer;
      }

      span {
        font-size: 14px;
        margin-left: 15px;
        color: rgb(75, 85, 99);
      }

      .btn-wrap {
        display: flex;
        justify-content: space-around;
        width: 100px;

        .el-button--medium {
          border: none;
          background-color: unset;
          padding: 0;

        }

        ::v-deep [class^=el-icon-],
        [class*=" el-icon-"] {
          color: #409eff;
        }
      }

    }
  }

  .pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }
}
</style>
